<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .red{
        color: red;
    }
    </style>
</head>

<body>
    <div id="list"></div>
    <div id="content"></div>
    <input type="checkbox" name="" id="">
</body>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/handlebars.js/3.0.3/handlebars.min.js"></script>
<script src="js/template.js"></script>
<script id="test" type="text/html">
    <ul>
        {{each aaa}}
        <li {{$value.chk | addClass}}>
           {{$value.name}} {{$value.chk | compare }}
           <input type="checkbox" name="" id="" {{$value.checked | checked }}>
        </li>
        {{/each}}
    </ul>
</script>
<script>
function tmp_html(script_id, data, target_obj) {
    var template = Handlebars.compile($(script_id).html());
    var my_template = template(data);
    $(target_obj).html(my_template);
}

$(function() {
    
// 横屏监听



    var data1 = [{
        "chk": "0",
        "name": "anan.net"
    }, {
        "chk": "0",
        "name": "anan.com"
    }, {
        "chk": "0",
        "name": "anan.cn"
    }, {
        "chk": "1",
        "name": "anan.cc",
        "checked":true
    }]
    var bbb = {
        "aaa": data1
    };
    template.helper("compare",function(abc){
        if (abc=='0') {
           // this.parent().addClass("red");
            return "已被注册";
        }else {
            return "未注册"
        }
    });
    template.helper("addClass",function(aa){
        if (aa=="0") {
            return "class=red"
        };
    }); 
    template.helper("checked",function(aa){
        if (aa) {
            return "checked=checked"
        };
    });
    var html = template('test', bbb);
    $('#content').html(html);
});

</script>

</html>
